<template>
  <div class="toolMain">
    <develop-search></develop-search>
    <div class="toolMain-out">
      <div v-for="item in TOOL_LIST" class="toolMain-box" :key="item.id">
        <ToolCard @click="goRouter(item)" v-bolang="'#ffc069'">
          <div class="toolMain-content">
            <div class="toolMain-content-title">
              {{ item.title }}
            </div>
            <div class="toolMain-content-desc">
              {{ item.desc }}
            </div>
          </div>
        </ToolCard>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import "./style.scss";
import ToolCard from "@/components/clickCard.vue";
import {} from "vue";
import DevelopSearch from "../DevelopSearch/index.vue";
import { TOOL_LIST } from "../const";
import { useRouter } from "vue-router";
import { ItemTypeFromArray } from "@/util/util";

const router = useRouter();

// 跳转至对应链接
const goRouter = (item: ItemTypeFromArray<typeof TOOL_LIST>) => {
  router.push(item.router);
};
</script>

<style lang="scss" scoped></style>
